<template name="userManagement">
    {{> pageHeading title=getPageHeading }}

    {{#if isConnected}}
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>{{_ "user_management"}}
                                <small>{{_ "user_management_info"}}</small>
                            </h5>

                            <div class="ibox-tools">
                                <button id="btnEditUser" type="button" class="btn btn-sm btn-primary fix-button"
                                        style="display: none">{{_ "edit_user"}}
                                </button>

                                <button id="btnManageRoles" type="button" class="btn btn-sm btn-primary fix-button"
                                        data-toggle="modal" data-target="#manageRolesModal"
                                        style="display: none">{{_ "manage_roles"}}
                                </button>

                                <button id="btnManageUsers" type="button" class="btn btn-sm btn-primary fix-button"
                                        data-toggle="modal" data-target="#manageUsersModal"
                                        style="display: none">{{_ "manage_users"}}
                                </button>


                                <a id="aRunOnAdminDBToFetchUsers" class="i-checks"
                                   data-toggle="tooltip"
                                   title="{{_ "run_on_admin_info"}}">
                                    <input id="inputRunOnAdminDBToFetchUsers" type="checkbox" value=""
                                           class="form-control"
                                           checked=""
                                           style="position: absolute; opacity: 0;"/>
                                </a>


                            </div>
                        </div>

                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-lg-5">
                                    <div id="userTree"></div>
                                </div>
                                <div class="col-lg-7">
                                    <h3>{{informationTitle}}</h3>
                                    {{{informationBody}}}
                                </div>
                            </div>
                        </div>

                        <div class="ibox-footer">
                            <button id="btnRefreshUsers"
                                    class="btn btn-block btn-outline btn-primary ladda-button"
                                    type="button"
                                    data-style="contract">
                                <strong>{{_ "refresh"}}</strong></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{/if}}

    {{> manageRoles}}
    {{> manageUsers}}
</template>
